<template>
  <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button
          @click="$router.push({ name: 'advert-space-create'})"
        >添加广告位</el-button>
      </div>
     <el-table
      border
      :data="content"
      style="width: 100%">
      <el-table-column
        align="center"
        label="spaceKey"
        prop="spaceKey"
       >
      </el-table-column>
      <el-table-column
        align="center"
        label="广告位名称"
        prop="name"
        >
      </el-table-column>
      <el-table-column
        align="center"
        label="创建时间"
        >
        <template slot-scope="scope">
           <p>{{ scope.row.createTime | dateFormat }}</p>
          </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="更新时间"
        >
        <template slot-scope="scope">
           <p>{{ scope.row.updateTime | dateFormat }}</p>
          </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="编辑">
        <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>
          </template>
      </el-table-column>
    </el-table>
    </el-card>
</template>

<script>
import { getAllSpaces } from '@/services/advert-space'
export default {
  name: 'AdvertSpaceList',
  data () {
    return {
      content: []
    }
  },
  created () {
    this.loadAdSpace()
  },
  methods: {
    handleEdit (content) {
      // 设置跳转
      this.$router.push({
        name: 'advert-space-edit',
        params: {
          id: content.id
        }
      })
    },
    // 加载广告位
    async loadAdSpace () {
      const { data } = await getAllSpaces()
      console.log(data)
      this.content = data.content
      this.$store.commit('gai', '广告位列表')
    }
  },
  filters: {
    // 日期过滤器
    dateFormat (date) {
      date = new Date(date)
      return `
        ${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} 
        ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}
      `
    }
  }
}
</script>

<style>

</style>
